{extend name="public/base" /}
{block name="title"}添加节点{/block}

{block name="main"}

<div class="layui-container" style="width: 600px; padding: 2px;">  
    <div class="layui-form-item">
        <div class="layui-btn-group" id="JP_btn_main">
            <button type="button" class="layui-btn" crop-event="rotate" data-option="90" >正旋转90度</button>
            <button type="button" class="layui-btn" crop-event="rotate" data-option="-90" >逆旋转90度</button>
            <button type="button" class="layui-btn" >放大</button>
            <button type="button" class="layui-btn" >重置图片</button>
            <button type="button" class="layui-btn" id="JS_upload_btn" >选择图片</button>
            <button type="button" class="layui-btn" crop-event="saveData" >保存结果</button>
        </div>
    </div>
    <div class="layui-row" >
        <div class="layui-col-md9" id="JP_img_main" >
            <img style="width: 100%;" src="http://admins.elite.com\uploads\default\2019\05\05\a3\5cce5d57010bb.png" />
        </div>
        <div class="layui-col-md3" id="JP_img_preview" style="padding: 0px 10px;">
            右边实时结果展示
            <div class="p-preview JP_img_previewOne" style="width: 100%; height: 100px;overflow: hidden"></div>
        </div>
    </div>
</div>

{/block}
{block name="script"}
<script type="text/javascript" src="/static/admin/lib/cropper/cropper.js"></script>
<link rel="stylesheet" href="/static/admin/lib/cropper/cropper.css" media="all" />
<script> 


layui.use(['form','upload','layer'],function(){
    var upload = layui.upload;
    
    var sys = {
        saveH : 100, // 剪切后保存图片的 高度
        saveW : 200, // 剪切后保存图片的 宽度
        url   : '/sys/Upload/image', // 上传接口
        okFunc : function(){},  //上传成功后回调
        errorFunc : function(){}, //上传失败的回调
    }
    var uploadIndex  = '';
    var uploadObject = '';
    var imageObjcet = $('#JP_img_main > img'); // 图片操作对象
    //按钮操作选择
    $('#JP_btn_main .layui-btn').on("click",function(){
        var event = $(this).attr("crop-event");
        if( event === '' ){
            // 选择图片
        }else{
          //  if( ! imageObjcet ) alert( '请先选择图片');
            if( event === 'confirmSave'){
                // 保存图片
            }else if (event === 'rotate') {
                var option = $(this).attr('data-option');
                imageObjcet.cropper('rotate', option);
            }else if(event === 'saveData'){
                
                var data = imageObjcet.cropper("getCroppedCanvas", {
                    width: sys.saveW,
                    height: sys.saveH
                });
                /*
                var blob = data.toBlob(function (file) {
                    console.log(file);
                    uploadObject.upload(uploadIndex, data);
                });*/
                
               // var blob = data.toDataURL();
              
                data.toBlob(function (blob) {
                   // uploadObject.upload(uploadIndex, blob);
                    var fd = new FormData();
                    fd.append("file", blob, "image.png");
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', sys.url, true);
                    xhr.send(fd)
                   
                    /*
                    console.log(formData);
                    $.ajax({
                        method: "post",
                        url: sys.url, //用于文件上传的服务器端请求地址
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (result) {
                            //保存图片返回表示
                         //   console.log(result);
                        },
                        error: function (ret) {
                          console.log('Upload error');
                          console.log(ret);s
                        }
                    });*/
                });
            }
        }
    });
    
    // 剪切图片处理
    var cropperDeal = function(){
        imageObjcet = $('#JP_img_main > img');
        imageObjcet.cropper({
           // DragMode : 'crop', //
            aspectRatio: sys.saveW / sys.saveH ,
            preview: $(".JP_img_previewOne"),
            crop: function(e) {
             //   console.log(e.detail);
            },
            
            built: function () {
                // And then
                console.log('built');
             //   $(this).cropper('crop');
            }
        });
        
    }
    //执行实例
    var uploadInst = upload.render({
        elem: '#JS_upload_btn', //绑定元素
        url: '/sys/Upload/image', //上传接口  
        auto: false, //选择文件后不自动上传
        choose : function (obj){ // 选择文件之后处理
            var files = obj.pushFile();                    
            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function(index, file, result){
                
                $('#JP_img_main img').attr('src',result);
                uploadIndex = index;
                uploadObject = obj;
                console.log(index);
                console.log(file);
                cropperDeal();
               // console.log(index); //得到文件索引
               // console.log(file); //得到文件对象
               // console.log(result); //得到文件base64编码，比如图片                
                //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增                
                //这里还可以做一些 append 文件列表 DOM 的操作                
                //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
            });
        },      
        done: function(ret){
            //上传完毕回调
            if( ret.code == 1 ){
                $('#JS_upload_img img').attr('src',ret.data);
                $('#JS_logo').val(ret.data);
            }else{
                common.tip(ret.msg);
            }
        }
    });
    
    
    
});


</script>
{/block}